<template>
  <a-modal
    :width="750"
    :visible="visible"
    :title="params.name"
    @ok="handleOk"
    @cancel="handleClose"
    centered
  >
    <div class="operate_con">
      <div class="left_con">
        <span>滤镜：</span>
        <a-switch v-model:checked="filterForm.open" />
      </div>
      <div class="right_con">
        <span
          >随机滤镜：
          <a-tooltip
            placement="topLeft"
            title="生成的所有视频组合，将随机使用1个滤镜效果"
          >
            <QuestionCircleOutlined />
          </a-tooltip>
        </span>
        <a-switch
          :disabled="filterForm.open === false"
          style="margin-left: 10px"
          v-model:checked="filterForm.random"
        />
      </div>
    </div>

    <div class="form_con">
      <div>
        <div class="form_title">自选滤镜</div>
        <div class="form_desc">
          生成的所有视频组合，将随机使用1个已选择的滤镜
        </div>
        <div class="selected-effect-con">
          <a-tag
            v-for="(item, index) in selectedEffectList"
            closable
            color="error"
            @close.prevent="() => handleCancelSelect(index)"
          >
            {{ JSON.parse(item)?.material_name }}</a-tag
          >
        </div>
      </div>
    </div>

    <div class="form_con" style="height: 360px">
      <a-checkbox-group v-model:value="selectedEffectList" style="width: 100%">
        <div class="form_list">
          <div
            class="form_item"
            v-for="(effect_item, index) in effectList"
            :key="index"
          >
            <div class="filter_con">
              <div class="filter_item">
                <label>
                  <a-checkbox
                    :disabled="filterForm.random || !filterForm.open"
                    v-show="!filterForm.random && filterForm.open"
                    class="filter-checkbox"
                    :value="JSON.stringify(effect_item)"
                  >
                  </a-checkbox>
                  <div class="filter_img">
                    <img :src="effect_item.material_url" alt="" />
                  </div>
                  <div class="filter_name">{{ effect_item.material_name }}</div>
                </label>
              </div>
            </div>
          </div>
        </div>
      </a-checkbox-group>
    </div>

    <template #footer>
      <a-button @click="handleClose">取消</a-button>
      <a-button @click="handleOk" type="primary" style="margin-left: 10px"
        >保存</a-button
      >
    </template>
  </a-modal>
</template>

<script>
import request from "../../../../../../common/utils/request";
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  createVNode,
  ref,
  nextTick,
} from "vue";
import {
  FolderAddOutlined,
  MinusOutlined,
  PlusOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import store from "../../../../../../store";
import { message } from "ant-design-vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
    data: {
      type: Object,
      default: () => {},
    },
  },

  components: {
    QuestionCircleOutlined,
  },

  setup(props, context) {
    const state = reactive({
      filterForm: {
        open: true,
        random: false,
      },
      selectedEffectList: [],
      effectList: [],
    });

    const effectFilter = computed(() =>
      store.getters.clipJSON.effects?.find((item) => item.type === "filter")
    );

    watch(
      () => state.filterForm.open,
      (val) => {
        if (!val) {
          state.filterForm.random = false;
          state.selectedEffectList = [];
        }
      }
    );

    watch(
      () => state.filterForm.random,
      (val) => {
        if (val) {
          state.selectedEffectList = [];
        }
      }
    );

    const handleOk = () => {
      if (
        state.selectedEffectList.length === 0 &&
        state.filterForm.open &&
        !state.filterForm.random
      ) {
        return message.warning("请至少选择1个滤镜");
      }
      if (state.filterForm.open) {
        store.dispatch("SetClipJSONEffects", {
          type: "filter",
          params: {
            random: state.filterForm.random,
            sub_types: state.selectedEffectList.map((item) => JSON.parse(item)),
          },
        });
      } else {
        store.dispatch("SetClipJSONEffects", {
          type: "filter",
          params: null,
        });
      }

      context.emit("close");
    };

    const handleClose = () => {
      context.emit("close");
    };

    const handleCancelSelect = (index) => {
      state.selectedEffectList.splice(index, 1);
    };

    const getEffectList = () => {
      request
        .get("/work_ai", "/user/shotstack/material/filter/news/list")
        .then((res) => {
          state.effectList = res.result?.materials;
          state.effectList.forEach((item) => {
            const findIndex = state.selectedEffectList?.findIndex(
              (i) => JSON.parse(i).id === item.id
            );
            if (findIndex > -1) {
              state.selectedEffectList[findIndex] = JSON.stringify(item);
            }
          });
        });
    };

    watch(
      () => props.visible,
      (visible) => {
        if (visible) {
          state.filterForm.random = effectFilter.value?.params?.random || false;
          state.selectedEffectList =
            effectFilter.value?.params?.sub_types?.map((item) =>
              JSON.stringify(item)
            ) || [];
          getEffectList();
        }
      }
    );

    return {
      ...toRefs(state),
      effectFilter,
      handleOk,
      handleClose,
      getEffectList,
      handleCancelSelect,
    };
  },
});
</script>

<style lang="less" scoped>
.operate_con {
  display: flex;
  align-items: center;

  .left_con {
    display: flex;
    align-items: center;
  }

  .right_con {
    display: flex;
    align-items: center;
    margin-left: 100px;
  }
}

.form_con {
  overflow-y: scroll;
  width: 100%;

  .form_list {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    width: 5px;
    background-color: transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(193, 193, 193, 0.5);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  .selected-effect-con {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0;
    & > span {
      margin-right: 20px;
      margin-bottom: 10px;
    }
  }

  .form_title {
    color: #333;
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
  }
  .form_item {
    width: 106px;
    margin-top: 10px;
    margin-right: 10px;

    .form_desc {
      color: #999;
      font-size: 12px;
    }

    .filter_con {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      transform: translateX(-10px);

      .filter_item {
        position: relative;
        margin-left: 10px;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        cursor: pointer;

        &.filter-item-disabled {
          .filter_img img {
            filter: grayscale(0.5);
          }
          .filter_name {
            filter: grayscale(0.5);
          }
        }

        .filter-checkbox {
          position: absolute;
          right: 5px;
          top: 0;
        }

        .filter_img img {
          width: 106px;
          height: 60px;
          border-radius: 4px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .filter_name {
          color: #666;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
